<template>
	<view class="menu-custom">
		<view class="menu-list" :style="{marginTop: navHeight}">
			<view :class="['menu-item', current == index ? 'menu-active' : '']" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(index, item)">
				<image class="menu-item-img" :src="item.icon"></image>
				<view class="menu-item-name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { useNavbar } from "@/utils/hooks.js";
	const { statusBarHeight, navHeight } = useNavbar();
	const current = ref(0);
	const menuList = ref([
		{
			name: "报警",
			icon: "/static/tabbar_warn_active.png",
			path: "/pages/warn/list"
		},
		{
			name: "能耗",
			icon: "/static/tabbar_energy_active.png",
			path: "/pages/energy/detail"
		},
		{
			name: "组态",
			icon: "/static/detail_config.png",
			path: "/pages/screen/index"
		},
		// {
		// 	name: "维保",
		// 	icon: "/static/detail_maintain.png",
		// 	path: ""
		// },
		{
			name: "数据查询",
			icon: "/static/detail_find_data.png",
			path: "/pages/data/query"
		},
		{
			name: "数据统计",
			icon: "/static/detail_statistics.png",
			path: "/pages/data/stat"
		},
		{
			name: "实时数据",
			icon: "/static/detai_real_time_data.png",
			path: "/pages/data/realtime"
		},
		{
			name: "日志查询",
			icon: "/static/detail_find_journal.png",
			path: "/pages/data/log"
		}
	]);

	// 菜单点击
	function handleMenuClick(index, item) {
		if (!item.path) {
			return;
		}
		current.value = index;
		uni.navigateTo({
			url: item.path,
		});
	}
</script>
<style lang="scss" scoped>
	.menu-custom {
		padding: 0 10px;
		background-color: #fff;

		.menu-project {
			height: 70px;
			line-height: 70px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.menu-project-name {
				color: #666;
				font-size: 28rpx;
			}

			.menu-project-arrow {
				padding-left: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.menu-list {
			margin-top: 10px;

			.menu-item {
				padding: 0 12px;
				height: 40px;
				display: flex;
				align-items: center;
				border-radius: 5px;
				background-color: #fff;
			}

			.menu-item-img {
				width: 15px;
				height: 15px;
			}

			.menu-item-name {
				padding-left: 10px;
				color: #333;
				font-size: 13px;
			}

			.menu-active {
				background-color: rgba(73, 136, 253, 0.1);

				.menu-item-name {
					font-weight: 600;
				}
			}
		}
	}
</style>